/*
Mif.Menu.Draw
*/

Mif.Menu.List.implement({

	draw: function(){
		if(this.$draw) return;
		var container=new Element('div', {'class': 'mif-menu-list'});
		container.setStyle('z-index',this.zIndex).addClass(this.className);
		this.container=container;
		var bg=new Element('div', {'class': 'mif-menu-background'}).set('html',''+
		'<div class="top">'+
			'<div class="tl"></div>'+
			'<div class="t"></div>'+
			'<div class="tr"></div>'+
		'</div>'+
		'<div class="center">'+
			'<div class="l"></div>'+
			'<div class="c"></div>'+
			'<div class="r"></div>'+
		'</div>'+
		'<div class="bottom">'+
			'<div class="bl"></div>'+
			'<div class="b"></div>'+
			'<div class="br"></div>'+
		'</div>').inject(container);
		var items=this.items;
		var html=[];
		for(var i=0, l=items.length;i<l;i++){
			html.push(items[i].getHtml());
		}
		this.wrapper=new Element('div', {'class': 'mif-menu-wrapper'}).inject(container).set('html', html);
		this.$draw=true;
		return this.fireEvent('draw');
	}
	
});

Mif.Menu.Item.implement({
	
	getHtml: function(){
		switch(this.mode){
			case 'description':
				return '<div class="mif-menu-desc" uid="'+this.UID+'" id="'+this.UID+'">'+this.name+'</div>';
			case 'separator':
				return '<div class="mif-menu-separator" uid="'+this.UID+'"></div>';
			case 'default':
			case 'radio':
			case 'checkbox':
				return '<div class="mif-menu-item'+
						(this.disabled ? ' mif-menu-item-disabled' : '')+
						(this.subMenu ? ' mif-menu-item-submenu' : '')+'" uid="'+this.UID+'" id="mif-menu-item-'+this.UID+'">'+
							'<div class="mif-menu-item-wrapper">'+
								'<span class="mif-menu-icon '+this.icon+'" '+(this.iconImg ? 'style="background-image:'+this.iconImg +'"': '')+'></span>'+
								'<span class="mif-menu-name">'+this.name+'</span>'+
							'</div>'+
						'</div>';
		}
	},
	
	update: function(){
		var itemElement=this.getElement('item');
		itemElement.className="mif-menu-item "+
		(this.disabled ? ' mif-menu-item-disabled' : '')+
		(this.selected ? ' mif-menu-item-selected' : '')+
		((this.disabled && this.selected) ? ' mif-menu-item-disabled-selected' : '')+
		(this.subMenu ? ' mif-menu-item-submenu' : '');
		var icon=this.getElement('icon');
		icon.className='mif-menu-icon '+this.icon;
		icon.style.backgroundImage=this.iconImg||'';
		var name=this.getElement('name');
		name.innerHTML=this.name;
	},

	getElement: function(type){
		var item=$('mif-menu-item-'+this.UID);
		if(type=='item') return item;
		if(type=='icon') return item.getElement('.mif-menu-icon');
		if(type=='name') return item.getElement('.mif-menu-name');
	}

});